<template>
  <div class="main-page">
    <div class="page-header">
      <div class="page-header-title">
        辽宁省房地产市场监测系统 —— 商品房供应
      </div>
      <div class="page-header-filtrate">
        <public-change-province-city
          :cityList="mapList"
          :currentCity="cityObj.code"
          @changeCity="changeCity"
        />
        <month-range-time-filtrate-public class="page-header-filtrate-month-range" :month-range="monthRange"
                                          @changeFiltrateTime="changeMonthRange"/>
      </div>
      <div class="back-home-btn" @click="router.go(-1)">返回首页</div>
    </div>
    <div class="main-content">
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="module-item consent-unsold-construction-acreage">
            <div class="module-item-title">
              <span>已许未售建筑面积</span>
              <el-tabs class="module-item-title-tabs" v-model="tabConfig.consentUnsoldConstructionAcreage"
                       @tab-change="changeTab($event, 'consentUnsoldConstructionAcreage')">
                <el-tab-pane v-for="(item, index) of commodityHouseTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <el-tabs class="module-item-chart-tabs" v-model="tabConfig.consentUnsoldConstructionAcreageChartTab"
                       @tab-change="changeTab($event, 'consentUnsoldConstructionAcreageChartTab')">
                <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
              <line-bar
                v-if="consentUnsoldConstructionAcreageData.xAxisData?.length"
                ref="consentUnsoldConstructionAcreageRef"
                :line-bar-data="consentUnsoldConstructionAcreageData"
                class="h280"
                @click="fullSc('lineBar', consentUnsoldConstructionAcreageData)"
              ></line-bar>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-item under-construction-nonconsent-construction-acreage">
            <div class="module-item-title">
              <span>在建未许建筑面积</span>
              <el-tabs class="module-item-title-tabs" v-model="tabConfig.underConstructionNonconsentConstructionAcreage"
                       @tab-change="changeTab($event, 'underConstructionNonconsentConstructionAcreage')">
                <el-tab-pane v-for="(item, index) of commodityHouseTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <el-tabs class="module-item-chart-tabs"
                       v-model="tabConfig.underConstructionNonconsentConstructionAcreageChartTab"
                       @tab-change="changeTab($event, 'underConstructionNonconsentConstructionAcreageChartTab')">
                <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
              <line-bar
                v-if="underConstructionNonconsentConstructionAcreageData.xAxisData?.length"
                ref="underConstructionNonconsentConstructionAcreageRef"
                :line-bar-data="underConstructionNonconsentConstructionAcreageData"
                class="h280"
                @click="fullSc('lineBar', underConstructionNonconsentConstructionAcreageData)"
              ></line-bar>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-item every-city-inventory-construction-acreage-summary">
            <div class="module-item-title">
              <span>各城市库存建筑面积汇总</span>
              <el-tabs class="module-item-title-tabs" v-model="tabConfig.everyCityInventoryConstructionAcreageSummary"
                       @tab-change="changeTab($event, 'everyCityInventoryConstructionAcreageSummary')">
                <el-tab-pane v-for="(item, index) of commodityHouseTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
<!--              <el-tabs class="module-item-chart-tabs"
                       v-model="tabConfig.everyCityInventoryConstructionAcreageSummaryChartTab"
                       @tab-change="changeTab($event, 'everyCityInventoryConstructionAcreageSummaryChartTab')">
                <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>-->
              <bar-superposition
                v-if="everyCityInventoryConstructionAcreageSummaryData.xAxisData?.length"
                ref="everyCityInventoryConstructionAcreageSummaryRef"
                :bar-data="everyCityInventoryConstructionAcreageSummaryData"
                class="h280"
                @click="fullSc('barSuperposition', everyCityInventoryConstructionAcreageSummaryData)"
              ></bar-superposition>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="module-item given-unbuilt-construction-acreage">
            <div class="module-item-title">
              <span>已供未建建筑面积</span>
              <el-tabs class="module-item-title-tabs" v-model="tabConfig.givenUnbuiltConstructionAcreage"
                       @tab-change="changeTab($event, 'givenUnbuiltConstructionAcreage')">
                <el-tab-pane v-for="(item, index) of commodityHouseTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <el-tabs class="module-item-chart-tabs" v-model="tabConfig.givenUnbuiltConstructionAcreageChartTab"
                       @tab-change="changeTab($event, 'givenUnbuiltConstructionAcreageChartTab')">
                <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
              <line-bar
                v-if="givenUnbuiltConstructionAcreageData.xAxisData?.length"
                ref="givenUnbuiltConstructionAcreageRef"
                :line-bar-data="givenUnbuiltConstructionAcreageData"
                class="h280"
                @click="fullSc('lineBar', givenUnbuiltConstructionAcreageData)"
              ></line-bar>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-item for-sale-construction-acreage">
            <div class="module-item-title">
              <span>待售建筑面积</span>
              <el-tabs class="module-item-title-tabs" v-model="tabConfig.forSaleConstructionAcreage"
                       @tab-change="changeTab($event, 'forSaleConstructionAcreage')">
                <el-tab-pane v-for="(item, index) of commodityHouseTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <el-tabs class="module-item-chart-tabs" v-model="tabConfig.forSaleConstructionAcreageChartTab"
                       @tab-change="changeTab($event, 'forSaleConstructionAcreageChartTab')">
                <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
              <line-bar
                v-if="forSaleConstructionAcreageData.xAxisData?.length"
                ref="forSaleConstructionAcreageRef"
                :line-bar-data="forSaleConstructionAcreageData"
                class="h280"
                @click="fullSc('lineBar', forSaleConstructionAcreageData)"
              ></line-bar>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-item every-city-sales-cycle-summary">
            <div class="module-item-title">
              <span>各城市去化周期汇总</span>
<!--              <el-tabs class="module-item-title-tabs" v-model="tabConfig.everyCitySalesCycleSummary"
                       @tab-change="changeTab($event, 'everyCitySalesCycleSummary')">
                <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>-->
            </div>
            <div class="module-item-content">
              <multiple-bar
                v-if="everyCitySalesCycleSummaryData.xAxisData?.length"
                ref="everyCitySalesCycleSummaryRef"
                :bar-data="everyCitySalesCycleSummaryData"
                class="h280"
                @click="fullSc('multipleBar', everyCitySalesCycleSummaryData)"
              ></multiple-bar>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span>显性库存去化周期</span>
<!--              <el-tabs class="module-item-title-tabs" v-model="tabConfig.dominanceInventorySalesCycle"
                       @tab-change="changeTab($event, 'dominanceInventorySalesCycle')">
                <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>-->
            </div>
            <div class="module-item-content">
              <multiple-bar-with-markline
                v-if="dominanceInventorySalesCycleData.xAxisData?.length"
                ref="dominanceInventorySalesCycleRef"
                :bar-data="dominanceInventorySalesCycleData"
                class="h280"
                @click="fullSc('multipleBarWithMarkline', dominanceInventorySalesCycleData)"
              ></multiple-bar-with-markline>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-item recessiveness-inventory-sales-cycle">
            <div class="module-item-title">
              <span>隐性库存去化周期</span>
<!--              <el-tabs class="module-item-title-tabs" v-model="tabConfig.recessivenessInventorySalesCycle"
                       @tab-change="changeTab($event, 'recessivenessInventorySalesCycle')">
                <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>-->
            </div>
            <div class="module-item-content">
              <multiple-bar-with-markline
                v-if="recessivenessInventorySalesCycleData.xAxisData?.length"
                ref="recessivenessInventorySalesCycleRef"
                :bar-data="recessivenessInventorySalesCycleData"
                class="h280"
                @click="fullSc('multipleBarWithMarkline', recessivenessInventorySalesCycleData)"
              ></multiple-bar-with-markline>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span>广义库存去化周期</span>
<!--              <el-tabs class="module-item-title-tabs" v-model="tabConfig.broadSenseInventorySalesCycle"
                       @tab-change="changeTab($event, 'broadSenseInventorySalesCycle')">
                <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>-->
            </div>
            <div class="module-item-content">
              <multiple-bar-with-markline
                v-if="broadSenseInventorySalesCycleData.xAxisData?.length"
                ref="broadSenseInventorySalesCycleRef"
                :bar-data="broadSenseInventorySalesCycleData"
                class="h280"
                @click="fullSc('multipleBarWithMarkline', broadSenseInventorySalesCycleData)"
              ></multiple-bar-with-markline>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="magnifyData.dialogVisible" :title="magnifyData.dialogTitle" :width="magnifyData.dialogWidth"
               :top="magnifyData.dialogTop" center>
      <component
        v-if="magnifyData.dialogVisible"
        ref="dialogRef"
        :is="magnifyData.componentName"
        :dialogData="{fontSizeTimes: 2}"
        v-bind="{...magnifyData.props}"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import lineBar from "@/components/housePropertyCommodityHouseSupply/lineBar.vue";
import barSuperposition from "@/components/housePropertyCommodityHouseSupply/barSuperposition.vue";
import multipleBar from "@/components/housePropertyCommodityHouseSupply/multipleBar.vue";
import multipleBarWithMarkline from "@/components/housePropertyCommodityHouseSupply/multipleBarWithMarkline.vue";

export default {
  components: {
    lineBar,
    barSuperposition,
    multipleBar,
    multipleBarWithMarkline,
  }
}
</script>
<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";

import publicChangeProvinceCity from "@/components/housePropertyDevelopmentConstruction/publicChangeProvinceCity.vue";
import monthRangeTimeFiltratePublic from "@/components/housePropertyDevelopmentConstruction/timeFiltratePublic.vue";

const route = useRoute();
const router = useRouter();

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  dialogTitle: '',
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: ''
})
const dialogRef = ref(null) // chart图放大-domref

const cityObj = ref({
  name: '',
  code: '210000'
}) // 地图-城市code信息
const mapList = ref([
  {name: '辽宁省', code: '210000'},
  {name: '沈阳市', code: '210100'},
  {name: '大连市', code: '210200'},
  {name: '鞍山市', code: '210300'},
  {name: '抚顺市', code: '210400'},
  {name: '本溪市', code: '210500'},
  {name: '丹东市', code: '210600'},
  {name: '锦州市', code: '210700'},
  {name: '营口市', code: '210800'},
  {name: '阜新市', code: '210900'},
  {name: '辽阳市', code: '211000'},
  {name: '盘锦市', code: '211100'},
  {name: '铁岭市', code: '211200'},
  {name: '朝阳市', code: '211300'},
  {name: '葫芦岛市', code: '211400'}
])
const monthRange = ref(null) // 月范围筛选
const currentMonthAccumulationTabs = [ // 当月&累计tabs
  {
    label: '当月',
    value: 1
  },
  {
    label: '累计',
    value: 2
  }
]
const commodityHouseTabs = [ // 商品房&商品住宅tabs
  {
    label: '商品房',
    value: 1
  },
  {
    label: '商品住宅',
    value: 2
  }
]
const tabConfig = { // tabs-model
  consentUnsoldConstructionAcreage: 1, // 已许未售建筑面积-title-tab
  consentUnsoldConstructionAcreageChartTab: 1, // 已许未售建筑面积-chart-tab

  underConstructionNonconsentConstructionAcreage: 1, // 在建未许建筑面积-title-tab
  underConstructionNonconsentConstructionAcreageChartTab: 1, // 在建未许建筑面积-chart-tab

  everyCityInventoryConstructionAcreageSummary: 1, // 各城市库存建筑面积汇总-title-tab
  everyCityInventoryConstructionAcreageSummaryChartTab: 2, // 各城市库存建筑面积汇总-chart-tab

  givenUnbuiltConstructionAcreage: 1, // 已供未建建筑面积-title-tab
  givenUnbuiltConstructionAcreageChartTab: 1, // 已供未建建筑面积-chart-tab

  forSaleConstructionAcreage: 1, // 待售建筑面积-title-tab
  forSaleConstructionAcreageChartTab: 1, // 待售建筑面积-chart-tab

  everyCitySalesCycleSummary: 2, // 城市去化周期汇总-chart-tab

  dominanceInventorySalesCycle: 2, // 显性库存去化周期-chart-tab

  recessivenessInventorySalesCycle: 2, // 隐性库存去化周期-chart-tab

  broadSenseInventorySalesCycle: 2, // 广义库存去化周期-chart-tab
}

const consentUnsoldConstructionAcreageData = ref({ // 已许未售建筑面积-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '万㎡',
  seriesName: '面积',
  dialogTitle: '已许未售建筑面积',
  sum: 0,
  tb: 0
})
const consentUnsoldConstructionAcreageRef = ref(null) // 已许未售建筑面积-domref

const underConstructionNonconsentConstructionAcreageData = ref({ // 在建未许建筑面积-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '万㎡',
  seriesName: '面积',
  dialogTitle: '在建未许建筑面积',
  sum: 0,
  tb: 0
})
const underConstructionNonconsentConstructionAcreageRef = ref(null) // 在建未许建筑面积-domref

const everyCityInventoryConstructionAcreageSummaryData = ref({ // 各城市库存建筑面积汇总-data
  xAxisData: [],
  legendData: ['已许未建', '在建未许', '已供未建'],
  barData: [],
  yAxisLeftLabel: '万㎡',
  dialogTitle: '各城市库存建筑面积汇总'
})
const everyCityInventoryConstructionAcreageSummaryRef = ref(null) // 各城市库存建筑面积汇总-domref

const givenUnbuiltConstructionAcreageData = ref({ // 已供未建建筑面积-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '万㎡',
  seriesName: '面积',
  dialogTitle: '已供未建建筑面积',
  sum: 0,
  tb: 0
})
const givenUnbuiltConstructionAcreageRef = ref(null) // 已供未建建筑面积-domref

const forSaleConstructionAcreageData = ref({ // 待售建筑面积-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '万㎡',
  seriesName: '面积',
  dialogTitle: '待售建筑面积',
  sum: 0,
  tb: 0
})
const forSaleConstructionAcreageRef = ref(null) // 待售建筑面积-domref

const everyCitySalesCycleSummaryData = ref({ // 城市去化周期汇总-data
  xAxisData: [],
  legendData: ['显性库存', '隐性库存', '广义库存'],
  barData: [],
  yAxisLeftLabel: '月',
  dialogTitle: '城市去化周期汇总'
})
const everyCitySalesCycleSummaryRef = ref(null) // 城市去化周期汇总-domref

const dominanceInventorySalesCycleData = ref({ // 显性库存去化周期-data
  xAxisData: [],
  legendData: ['去化周期', '库存'],
  barData: [],
  dialogTitle: '显性库存去化周期',
  markLineData: [36, 18],
  overStopSupplyIndexArr: [], // 超过停止供应预警线的index
  overSalesCycleIndexArr: [], // 超过去化周期预警线index
})
const dominanceInventorySalesCycleRef = ref(null) // 显性库存去化周期-domref

const recessivenessInventorySalesCycleData = ref({ // 隐性库存去化周期-data
  xAxisData: [],
  legendData: ['去化周期', '库存'],
  barData: [],
  dialogTitle: '隐性库存去化周期',
  markLineData: [60],
  overStopSupplyIndexArr: [], // 超过停止供应预警线的index
})
const recessivenessInventorySalesCycleRef = ref(null) // 隐性库存去化周期-domref

const broadSenseInventorySalesCycleData = ref({ // 广义库存去化周期-data
  xAxisData: [],
  legendData: ['去化周期', '库存'],
  barData: [],
  dialogTitle: '广义库存去化周期',
  markLineData: [60],
  overStopSupplyIndexArr: [], // 超过停止供应预警线的index
})
const broadSenseInventorySalesCycleRef = ref(null) // 隐性库存去化周期-domref

const changeCity = (cityCode) => { // 模块切换城市
  cityObj.value.code = cityCode
  initPage()
}

const changeMonthRange = (val) => { // 月范围筛选
  console.log(val);
  initPage()
}

const changeTab = (event, module) => { // 公共-tabs切换
  switch (module) {
    case 'consentUnsoldConstructionAcreage': // 已许未售建筑面积-title-tab
      console.log('已许未售建筑面积-title-tab')
      break;
    case 'consentUnsoldConstructionAcreageChartTab': // 已许未售建筑面积-chart-tab
      console.log('已许未售建筑面积-chart-tab')
      break;
    case 'underConstructionNonconsentConstructionAcreage': // 在建未许建筑面积-title-tab
      console.log('在建未许建筑面积-title-tab')
      break;
    case 'underConstructionNonconsentConstructionAcreageChartTab': // 在建未许建筑面积-chart-tab
      console.log('在建未许建筑面积-chart-tab')
      break;
    case 'everyCityInventoryConstructionAcreageSummary': // 各城市库存建筑面积汇总-title-tab
      console.log('各城市库存建筑面积汇总-title-tab')
      break;
    case 'everyCityInventoryConstructionAcreageSummaryChartTab': // 各城市库存建筑面积汇总-chart-tab
      console.log('各城市库存建筑面积汇总-chart-tab')
      break;
    case 'givenUnbuiltConstructionAcreage': // 已供未建建筑面积-title-tab
      console.log('已供未建建筑面积-title-tab')
      break;
    case 'givenUnbuiltConstructionAcreageChartTab': // 已供未建建筑面积-chart-tab
      console.log('已供未建建筑面积-chart-tab')
      break;
    case 'forSaleConstructionAcreage': // 待售建筑面积-title-tab
      console.log('待售建筑面积-title-tab')
      break;
    case 'forSaleConstructionAcreageChartTab': // 待售建筑面积-chart-tab
      console.log('待售建筑面积-chart-tab')
      break;
    case 'everyCitySalesCycleSummary': // 城市去化周期汇总-chart-tab
      console.log('城市去化周期汇总-chart-tab')
      break;
    case 'dominanceInventorySalesCycle': // 显性库存去化周期-chart-tab
      console.log('显性库存去化周期-chart-tab')
      break;
    case 'recessivenessInventorySalesCycle': // 隐性库存去化周期-chart-tab
      console.log('隐性库存去化周期-chart-tab')
      break;
    case 'broadSenseInventorySalesCycle': // 广义库存去化周期-chart-tab
      console.log('广义库存去化周期-chart-tab')
      break;
  }
}

const fullSc = (componentName, componentParams) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  magnifyData.value.dialogTitle = componentParams.dialogTitle;
  switch (componentName) {
    case 'lineBar': // bar&line图
      magnifyData.value.props = {
        lineBarData: componentParams,
        class: 'h280 dialog-h280'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'barSuperposition': // 重合bar图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h280 dialog-h280'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'multipleBar': // 多bar图
    case 'multipleBarWithMarkline': // 多bar图带markLine
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h280 dialog-h280'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
  }
}

const getConsentUnsoldConstructionAcreageData = () => { // 已许未售建筑面积-getdata
  consentUnsoldConstructionAcreageData.value.xAxisData = ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7', '2024-8', '2024-9']
  consentUnsoldConstructionAcreageData.value.barData = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  consentUnsoldConstructionAcreageData.value.lineData = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  if (consentUnsoldConstructionAcreageRef.value) {
    consentUnsoldConstructionAcreageRef.value.updateChart();
  }
}

const getUnderConstructionNonconsentConstructionAcreageData = () => { // 在建未许建筑面积-getdata
  underConstructionNonconsentConstructionAcreageData.value.xAxisData =  ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7', '2024-8', '2024-9']
  underConstructionNonconsentConstructionAcreageData.value.barData = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  underConstructionNonconsentConstructionAcreageData.value.lineData = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  if (underConstructionNonconsentConstructionAcreageRef.value) {
    underConstructionNonconsentConstructionAcreageRef.value.updateChart();
  }
}

const getEveryCityInventoryConstructionAcreageSummaryData = () => { // 各城市库存建筑面积汇总-getdata
  everyCityInventoryConstructionAcreageSummaryData.value.xAxisData = mapList.value.filter(x => x.name !== '辽宁省').map(x => x.name)
  everyCityInventoryConstructionAcreageSummaryData.value.barData = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  ]
  if (everyCityInventoryConstructionAcreageSummaryRef.value) {
    everyCityInventoryConstructionAcreageSummaryRef.value.updateChart();
  }
}

const getGivenUnbuiltConstructionAcreageData = () => { // 在建未许建筑面积-getdata
  givenUnbuiltConstructionAcreageData.value.xAxisData = ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7', '2024-8', '2024-9']
  givenUnbuiltConstructionAcreageData.value.barData = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  givenUnbuiltConstructionAcreageData.value.lineData = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  if (givenUnbuiltConstructionAcreageRef.value) {
    givenUnbuiltConstructionAcreageRef.value.updateChart();
  }
}

const getForSaleConstructionAcreageData = () => { // 待售建筑面积-getdata
  forSaleConstructionAcreageData.value.xAxisData = ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7', '2024-8', '2024-9']
  forSaleConstructionAcreageData.value.barData = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  forSaleConstructionAcreageData.value.lineData = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  if (forSaleConstructionAcreageRef.value) {
    forSaleConstructionAcreageRef.value.updateChart();
  }
}

const getEveryCitySalesCycleSummaryData = () => { // 城市去化周期汇总-getdata
  everyCitySalesCycleSummaryData.value.xAxisData = mapList.value.filter(x => x.name !== '辽宁省').map(x => x.name)
  everyCitySalesCycleSummaryData.value.barData = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  ]
  if (everyCitySalesCycleSummaryRef.value) {
    everyCitySalesCycleSummaryRef.value.updateChart();
  }
}

const getDominanceInventorySalesCycleData = () => { // 显性库存去化周期-getdata
  dominanceInventorySalesCycleData.value.xAxisData = ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7', '2024-8', '2024-9']
  dominanceInventorySalesCycleData.value.barData = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0],
  ]
  dominanceInventorySalesCycleData.value.barData?.[0]?.forEach((x, i) => {
    if (x >= dominanceInventorySalesCycleData.value.markLineData[0]) {
      dominanceInventorySalesCycleData.value.overStopSupplyIndexArr.push(i)
      return
    }
    if (x >= dominanceInventorySalesCycleData.value.markLineData[1]) {
      dominanceInventorySalesCycleData.value.overSalesCycleIndexArr.push(i)
    }
  })
  if (dominanceInventorySalesCycleRef.value) {
    dominanceInventorySalesCycleRef.value.updateChart();
  }
}

const getRecessivenessInventorySalesCycleData = () => { // 隐性库存去化周期-getdata
  recessivenessInventorySalesCycleData.value.xAxisData = ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7', '2024-8', '2024-9']
  recessivenessInventorySalesCycleData.value.barData = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0],
  ]
  recessivenessInventorySalesCycleData.value.barData?.[0]?.forEach((x, i) => {
    if (x >= recessivenessInventorySalesCycleData.value.markLineData[0]) {
      recessivenessInventorySalesCycleData.value.overStopSupplyIndexArr.push(i)
      return
    }
  })
  if (recessivenessInventorySalesCycleRef.value) {
    recessivenessInventorySalesCycleRef.value.updateChart();
  }
}

const getBroadSenseInventorySalesCycleData = () => { // 广义库存去化周期-getdata
  broadSenseInventorySalesCycleData.value.xAxisData = ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7', '2024-8', '2024-9']
  broadSenseInventorySalesCycleData.value.barData = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0],
  ]
  broadSenseInventorySalesCycleData.value.barData?.[0]?.forEach((x, i) => {
    if (x >= broadSenseInventorySalesCycleData.value.markLineData[0]) {
      broadSenseInventorySalesCycleData.value.overStopSupplyIndexArr.push(i)
      return
    }
  })
  if (broadSenseInventorySalesCycleRef.value) {
    broadSenseInventorySalesCycleRef.value.updateChart();
  }
}

const initPage = () => {
  getConsentUnsoldConstructionAcreageData() // 已许未售建筑面积
  getUnderConstructionNonconsentConstructionAcreageData() // 在建未许建筑面积
  getEveryCityInventoryConstructionAcreageSummaryData() // 各城市库存建筑面积汇总
  getGivenUnbuiltConstructionAcreageData() // 已供未建建筑面积
  getForSaleConstructionAcreageData() // 待售建筑面积
  getEveryCitySalesCycleSummaryData() // 城市去化周期汇总
  getDominanceInventorySalesCycleData() // 显性库存去化周期
  getRecessivenessInventorySalesCycleData() // 隐性库存去化周期
  getBroadSenseInventorySalesCycleData() // 广义库存去化周期
}

onMounted(() => {
  if (route && route.query) {
    cityObj.value.code = route.query?.xzqhdm
    monthRange.value = [route.query?.startTime, route.query?.endTime]
  }

  initPage();
})

</script>

<style scoped lang="less">
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyDevelopmentConstruction/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100px;
    background-image: url("@/assets/img/housePropertyDevelopmentConstruction/header-bg.png");
    background-size: 100% 100%;

    &-title {
      position: absolute;
      left: 50px;
      font-size: 35px;
      color: #A6EDFF;
      text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
    }

    &-filtrate {
      position: relative;
      display: flex;
      align-items: center;
      top: 15px;
      left: 150px;

      .filtrate-city {
        width: 120px;

        /deep/ .el-select__wrapper {
          font-size: 15px;
        }

        margin-right: 30px;
      }

      .page-header-filtrate-month-range {
        /deep/ .el-range-input, /deep/ .el-range-separator {
          font-size: 15px;
          font-weight: lighter;
        }
      }
    }

    .back-home-btn {
      position: absolute;
      top: 52px;
      right: 50px;
      font-size: 20px;
      color: #7bebed;
      cursor: pointer;
    }
  }

  .main-content {
    padding: 0 20px;

    > .el-row:not(:last-child) {
      margin-bottom: 30px;
    }

    .module-item {
      width: 100%;
      height: 300px;

      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-header-bg.png");
        background-size: 100% 100%;

        > span {
          font-size: 15px;
          color: white;
          margin-left: 40px;
        }

        &-tabs {
          position: absolute;
          right: 50px;
        }
      }

      &-content {
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-content-bg.png");
        background-size: 100% 100%;
        position: relative;
        height: 280px;

        .module-item-chart-tabs {
          position: absolute;
          right: 0;
          top: 5px;
        }
      }
    }
  }
}

:deep(.el-tabs) {
  display: flex;
  align-items: center;

  .el-tabs__header {
    margin: 0;
  }

  .el-tabs__nav-wrap:after {
    height: 0;
  }

  .el-tabs__active-bar {
    height: 0;
  }

  .el-tabs__item {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 12px;
    height: 20px;
    cursor: pointer;
    color: white;
    background: rgb(9, 31, 63);
  }

  .el-tabs__item.is-active {
    background: #2187F4;
  }
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__title {
    font-size: 30px;
    color: white;
  }

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}
</style>